<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="../../assets/js/base/vue.js" type="text/javascript" charset="utf-8"></script>
	<title>评论功能</title>
</head>
<body>

	<div id="app">
		<com-form @func="loadComment"></com-form>
		<div>
			<ul>
				<li v-for="com in commentList" ref="cList" >
					<div style="border: 1px solid gray;"  >
						<span>{{com.content}}</span>
						--------------
						<span>{{com.user}}</span>
					</div>
				</li>
			</ul>
		</div>
		<button @click="getElement"> ref引用 </button>
	</div>
	
	<template id="comForm">
		<div>
			<div >
				<label>评论人：</label>
				<input type="text" v-model="user"/>
			</div>
			<div >
				<label>评论内容：</label>
				<input type="text" v-model="content"/>
			</div>
			<div >
				<input type="button" value="发表评论" @click="pushComment"/>
			</div>
		</div>
	</template>
	
	<script type="text/javascript">
		
		var comForm = {
			template: '#comForm',
			data(){
				return {id:"",user:"",content: ""}
			},
			methods:{
				pushComment(){
					// 数据存放到localStorage 中
					// localStorage只能保存字符串
					// 拼接数组对象存储
					// 先调用JSON.Stringify()将json对象序列化
					// 先将localStorage中的数据取出来，使用JSON.parse()转换成json数组对象，将最新的数据push到数组中
					// 如果localStorage中没有数据，将会数据转换失败，重新赋值"[]",解析之后是数组空对象
					// 将最新的评论数组数据，再次调用JSON.Stringify转为字符串，使用localStorage.setItem()保存
					var comment = {id:new Date(), user: this.user, content: this.content}
					var list = JSON.parse(localStorage.getItem('cmts') || '[]');
					list.unshift(comment);
					localStorage.setItem('cmts', JSON.stringify(list));
					this.user = this.content = '';
					this.$emit('func');
					
				}
			}
		}
		
		var vm = new Vue({
			el: "#app",
			data: {
				commentList:[
					{id: new Date(), user:'李白', content:'黄河之水天上来，奔流到海不复回。'},
					{id: new Date(), user:'杜甫', content:'国破山河在，城春草木深。'},
					{id: new Date(), user:'苏轼', content:'但愿人长久，千里共婵娟。'}
				]
			},
			methods:{
				loadComment: function() {
					var list = JSON.parse(localStorage.getItem('cmts') || '[]');
					this.commentList = list;
				},
				getElement(){
					console.log(this.$refs.cList[0].innerText);// reference:引用
					// 也可以引用组件，通过refs调用组件的数据和方法
					// this.$refs.cList[0].data
					// this.$refs.cList[0].methodName
				}
			},
			components:{
				comForm
			},
			beforeCreate() {} ,// 不能调用方法，在执行这个钩子函数的呃时候，data和methods还没有初始化
			created() {// 不能使用() => {}箭头函数，否则提示没有loadComment方法
				this.loadComment();
			}
			
		})
	</script>
</body>
</html>